<template>
  <div class="earthquake-event">
    <DataTable
      class="no-search-table-container"
      :hasIndex="false"
      :tableHead="tableHead"
      :tableData="tableData"
      :isHasPagination="false"
      :border="props.hasBorder">
      <el-table-column
        type="amp"
        label="振幅"
        align="center">
        <template #default="scope">
          {{scope.row.amp.toFixed(2)}}
        </template>
      </el-table-column>
      <el-table-column
        type=""
        label="操作"
        align="center"
        width="180">
        <template #default="scope">
          <el-button
            size="small" type="success"
            @click="handleVisible(scope.row)">显示图形
          </el-button>
          <el-button
            size="small" type="success"
            @click="download(scope.row)">下载
          </el-button>
        </template>
      </el-table-column>
    </DataTable>
    <el-dialog
      title="实时数据"
      v-model="dialogVisible"
      :append-to-body="true"
      width="70%"
    >
    <RealtimeDatas :id="currentId" :chartId="'earthChart'" style="width: 100%;height:400px"></RealtimeDatas>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
  import DataTable from '@/components/DataTable.vue'
  import RealtimeDatas from '@/views/comps/RealtimeDatas.vue'
  import {onMounted, ref} from 'vue'
  import {getTiDataList} from "@/api/data";
  import dayjs from "dayjs";
  import stomp from "@/variable/Stomp";
  import {download} from "@/utils/download";

  const tableHead = [
    {
      prop: 'id',
      label: '站点编号',
      width: 100
    },
    {
      prop: 'triggerTime',
      label: '触发时间',
      width: 160,
      formatter: (row: any) => {
        return dayjs(new Date(row.triggerTime * 1000)).format('YYYY-MM-DD HH:mm:ss')
      }
    },
    {
      prop: 'intensity',
      label: '烈度',
    },{
      prop: 'PGA',
      label: 'PGA',
    },
  ]
  const props = defineProps<{
    id: string,
    hasBorder: boolean
  }>()
  const tableData = ref([])
  const initTable = () => {
    getTiDataList(20, props.id).then(res => {
      tableData.value = res.data
    })
  }
  const loadData = () => {
    stomp.subscribe('/topic/ti', (message) => {
      tableData.value.push(message)
      if (tableData.value.length > 20) {
        tableData.value.shift()
      }
    })
  }

  let dialogVisible =ref(false)
  let currentId = ref('')
  const handleVisible = (data: any) => {
    dialogVisible.value = true
    currentId.value = data.id
  }

  // const download = (data: any) => {
    // exportTemplate().then(data=>{
    //     const blob = new Blob([data],{ type: "application/vnd.ms-excel" }); // 把得到的结果用流对象转一下
    //     var a = document.createElement("a"); //创建一个<a></a>标签
    //     a.href = URL.createObjectURL(blob); // 将流文件写入a标签的href属性值
    //     a.download = "测试.xlsx"; //设置文件名
    //     a.style.display = "none"; // 障眼法藏起来a标签
    //     document.body.appendChild(a); // 将a标签追加到文档对象中
    //     a.click(); // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
    //     a.remove(); // 一次性的，用完就删除a标签
    //   }).catch(err=>{
    //     console.log(err)
    //   })
  // }
  const download = (data:any) => {
    download('http://39.97.237.76/站点模板.xlsx')
  }
  onMounted(() => {
    initTable()
    loadData()
  })


</script>

<style scoped lang="scss">
  .earthquake-event {
    width: 100%;
    height: 100%;

    :deep(.el-table) {
      background: none !important;
      --el-table-border-color: rgba(23, 156, 156, 0.6) !important;
    }

    :deep(.el-table tr) {
      background-color: rgba(0, 63, 63, 0) !important;
      color: rgba(54, 215, 215, 1) !important;
    }

    :deep(.data-table-wrap .el-table th.is-leaf) {
      background-color: rgba(6, 175, 175, 0.2) !important;
      color: rgba(54, 215, 215, 1) !important;
      border-bottom: 1px solid rgba(22, 198, 198, 0.6) !important;
    }

    :deep(.el-table td, .el-table th.is-leaf ) {
      border-bottom: 1px solid rgba(23, 156, 156, 0.6) !important;
    }

    :deep(.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell) {
      background-color: rgba(6, 175, 175, 0.2)
    }

    :deep(.el-button--success) {
      background-color: rgba(6, 175, 175, 0.2);
      border-color: rgba(6, 175, 175, 0.6);
    }
  }
 
</style>

<style>
 .el-dialog{
    background-color: rgb(0, 63, 63);
    color: rgba(54, 215, 215, 1) !important;
  }
</style>